<template>
	<view class="professBox">
		<view class="header">
			<view class="lists">
				<image :src="detail.headImg" class="avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="flex-row flex-between">
						<view class="flex-row flex-between">
							<view class="flex-row flex-between">
								<text class="name">{{detail.name}}</text>
								<view class="flex-row tag">
									<image src="../../static/icon/tip@2x.png"></image>
									<text>{{getType(detail.userType)}}</text>
								</view>
							</view>
							<view class="star">
								<image class=""v-if="detail.isCollect==false" @click="Collection(!detail.isCollect)" src="../../static/icon/star.png" mode=""></image>
								<image class="" v-if="detail.isCollect==true" @click="Collection(!detail.isCollect)" src="../../static/icon/star2.png" mode=""></image>
								<text>觅获</text>
							</view>
							
						</view>
					</view>
					<view class="intro">{{detail.userTypeName}}</view>
					<view class="has flex-row">
						<view class=" flex-row flex-between">
							<image src="../../static/icon/ptrz@2x.png" class="tagImg"></image>
							<text>平台认证</text>
						</view>
						<view class="hasOwn">
							已有
							<text>{{detail.patentNumber}}</text>
							件专利
						</view>
					</view>
				</view>
			</view>
			<view class="desc text-ellipsis3">
				{{detail.introduce}}
			</view>
		</view>
		<view class="content">
			<view class="tlbox flex-row">
				<image src="../../static/icon/ryzz@2x.png"></image>
				<view class="tl">荣誉资质</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H" v-for="(item, index) in huadongs(detail.honor)" :key="index"><image :src="item" @click="ViewImage"></image></view>
			</scroll-view>
			<view class="tlbox flex-row">
				<image src="../../static/icon/tdzl@2x.png"></image>
				<view class="tl">他的专利</view>
			</view>
			<view class="listBox" >
				<view class="list" v-for="item in list" :key="item.id" @click="godetail(item.id)">
					<view class="title">{{item.patentName}}</view>
					<view class="tagList flex-row">
						<view v-for="(i,index) in getlaber(item.keywords)" :key="index+5">{{i}}</view>
					</view>
					<view class="classList">
						<view v-for="n in item.needApplyType" :key="n" v-if="n==1">成果价值评估需求</view>
						<view v-for="n in item.needApplyType" :key="n" v-if="n==2">寻求销售渠道合作</view>
						<view v-for="n in item.needApplyType" :key="n" v-if="n==3">寻求转化生产合作</view>
						<view v-for="n in item.needApplyType" :key="n" v-if="n==4">寻求法律维权服务</view>
					</view>
					<view class="desc text-ellipsis3">{{item.introduction}}</view>
				</view>
			</view>
			<view class="nomore">-- 我是有底线的 --</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			detail:{},
			list:[],
			page:1,
			imgUrlarr:[]
		};
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
		this.getuser()
	},
	methods:{
		//专利详情
		getData(){
			this.$http.get('/userExpert/getExpertDetail', {userId:this.id}).then(res => {
				if (res.code == '0') {
					this.detail = res.data;
					this.imgUrlarr = res.data.honor.split(',')
					
				}
			})
			
		},
		getuser(){
			let patentData = {
				userId:this.id,
				current:this.page,
				size:10
			}
			this.$http.get('/userExpert/getPatentByUserId', patentData).then(res => {
				if (res.code == '0') {
					this.list = res.data.records
				}
			})
		},
		ViewImage(e) {
		    uni.previewImage({
		        urls: this.imgUrlarr,
		        current: e.currentTarget.dataset.url
		    });
		},
		godetail(id){
			uni.navigateTo({
				url:'../detail/index?id='+id
			})
		},
		getType(item){
			if(item == 1){
				return '普通用户'
			}else if(item == 2){
				return '行业专家'
			}else if(item == 3){
				return '合作高校'
			}else if(item == 4){
				return '合作单位'
			}else if(item == 5){
				return '合作院所'
			}else if(item == 6){
				return '合作伙伴'
			}
		},
		huadongs(item){
			if(item){
				return item.split(",")
			}else{
				return []
			}
			
		},
		getlaber(item) {
			return item.split(',')
		},
		Collection(){
			console.log(this.detail)
			let that = this
			let data = {
				userId:this.id,
				type:this.detail.isCollect?'2':'1'
			}
			that.$http.get('/patent/collectPatent', data).then(res => {
				if (res.code == 0) {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					setTimeout(function(){
						console.log(9)
						that.getData()
					},1500)
				}
			})
		},
	},
	
	onNavigationBarButtonTap(e){
		console.log(e)
		this.$set(e,'color','red')
		console.log(e)
		let data = {
			// patentId:this.patentId,
			userId:this.id,
			type:this.detail.isCollection?'2':'1'
		}
		this.$http.get('/patent/collectPatent', data).then(res => {
			
			if (res.code == 0) {
				this.detail.isCollection = !this.detail.isCollection;
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
			}
		})
	}
};
</script>

<style scoped lang="scss">
.scroll-view_H {
	/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
	white-space: nowrap;
	width: 100%;
	padding-top: 30upx;
	padding-bottom: 80upx;
}
.scroll-view-item_H view {
	box-sizing: border-box;
}
.professBox {
	.content {
		padding: 30upx;
		border-radius: 20upx 20upx 0 0;
		background: #fff;
		margin-top: -20upx;

		.scroll-view-item_H {
			position: relative;
			display: inline-block;
			width: 240upx;
			height: 170upx;
			text-align: center;
			margin-right: 20upx;
			border-radius: 8upx;
			image {
				width: 240upx;
				height: 170upx;
				border-radius: 8upx;
			}
		}

		.tlbox {
			align-items: center;
			image {
				width: 34upx;
				height: 36upx;
				margin-right: 16upx;
			}
			.tl {
				font-size: 36upx;
				color: #22222a;
				font-weight: bold;
			}
		}
		.nomore{
			font-size: 20upx;
			color: #999;
			padding: 30upx 0 37upx;
			text-align: center;
		}
		.listBox{
			margin-top: 20upx;
			background: #fff;
			padding:0 30upx;
			.list{
				padding:30upx 0 ;
				border-bottom: 1upx solid rgba(238,238,238,1);
				&:last-child{
					border-bottom: none;
				}
				.title{
					font-size: 32upx;
					color: #22222A;
					font-weight: bold;
				}
				.tagList{
					padding-top: 23upx;
					padding-bottom: 23upx;
					>view{
						font-size: 22upx;
						color: #FD580A;
						border:1upx solid #FD580A;
						padding: 5upx 10upx;
						margin-right: 16upx;
						border-radius: 8upx;
						
					}
				}
				.classList{
					color: #38D214;
					font-size: 26upx;
					// flex-wrap: wrap;
					>view{
						display: inline-flex;
						background: url(../../static/icon/green.png) no-repeat left 13upx;
						background-size: 8upx 8upx;
						padding-left: 20upx;
						margin-right: 37upx;
						padding-bottom: 20upx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
				.desc{
					color: #666666;
					font-size: 28upx;
					
				}
			}
		}
	}
	.header {
		padding: 40upx 30upx 40upx;
		background: #fd580a;
		.lists {
			padding: 0 0 30upx 0;
			// border-bottom: 1upx solid rgba(238,238,238,1);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			color: #fff;
			.avatar {
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
			}
			// &:last-child{
			// 	border-bottom: none;
			// }
			.info {
				position: relative;
				> view {
					// margin-bottom: 17upx;
				}
				margin-left: 0upx;
				width: 70%;
				.star{
					width: 120upx;
					height: 40upx;
					margin-left: 40upx;
					position: absolute;
					right: -20upx;
					top: 100upx;
					z-index: 10;
					display: flex;
					font-size: 26upx;
					
						
					image{
						width: 40upx;
						height: 40upx;
						vertical-align: middle;
						margin-right: 10upx;
					}
				}
				.name {
					font-size: 32upx;
					// color: #22222A;
					font-weight: bold;
				}
				.intro {
					font-size: 26upx;
					padding: 30upx 0;
					// color: #22222A;
				}
				.desc {
					font-size: 26upx;
					// color: #666;
					width: 442upx;
				}
				.has {
					font-size: 26upx;
					color: #fff;
					width: 100%;
					image {
						width: 28upx;
						height: 30upx;
					}
					.hasOwn {
						color: #fed1bb;
						padding-left: 20upx;
						> text {
							color: #fff;
						}
					}
				}
				.tag {
					background: #38d214;
					color: #fff;
					font-size: 22upx;
					align-items: center;
					// width:146upx;
					padding: 0 10upx 0 0;
					height: 40upx;
					line-height: 40upx;
					border-radius: 18upx;
					margin-left: 20upx;
					> image {
						width: 40upx;
						height: 40upx;
						vertical-align: middle;
					}
				}
				.tags{
					width:110upx;
					height:36upx;
					background:rgba(255,255,255,0.5);
					border-radius:18upx;
					font-size: 22upx;
					color: #fff;
					text-align: center;
					line-height: 36upx;
					justify-content: center;
				}
				.tagImg {
					width: 28upx;
					height: 30upx;
					vertical-align: middle;
					margin-right: 10upx;
				}
			}
		}
		.desc {
			color: #fff;
			font-size: 26upx;
		}
	}
}
</style>
